<script setup>
  import { getSessionListApi } from '@/api/message'
  import { CHAT_MSG_TYPE, CHAT_MSG_TYPE_TEXT } from '@/contants/message'
  import { useChatStore, useUserStore } from '@/stores'
  import { formatTime } from '@/utils/time'
  import { onShow } from '@dcloudio/uni-app'
  import { ref } from 'vue'
  const userStore = useUserStore()
  const chatStore = useChatStore()

  // 跳转至聊天页
  const gotoChatPage = ({ appUserVOTo, appUserVO, fromId, sessionId, msgId }) => {
    if (fromId === userStore.profile.userId) {
      chatStore.setChatOther({
        id: appUserVOTo.userId,
        nickName: appUserVOTo.nickName,
        avatar: appUserVOTo.avatar
      })
    } else {
      chatStore.setChatOther({
        id: appUserVO.userId,
        nickName: appUserVO.nickName,
        avatar: appUserVO.avatar
      })
    }
    uni.navigateTo({
      url: `/pages/message/chat?sessionId=${sessionId}&msgId=${msgId}`
    })
  }

  // 每次页面显示时,拉取一次会话列表
  onShow(() => {
    getSessionList()
  })

  // 会话列表
  const sessionList = ref([])

  // 计算会话未读条数
  const calcUnreadNum = () => {
    return sessionList.value.reduce((prev, cur) => prev + cur.readingCount, 0)
  }
  // 获取会话列表
  async function getSessionList() {
    if (!userStore.token) return
    sessionList.value = await getSessionListApi(userStore.profile.userId)
    console.log('sessionList = ', sessionList.value)
    const allUnreadNum = calcUnreadNum()
    // 设置 Tabbar 徽章
    if (allUnreadNum > 0) {
      uni.setTabBarBadge({
        index: 1,
        text: String(allUnreadNum)
      })
    } else {
      uni.removeTabBarBadge({
        index: 1
      })
    }
  }

  // 去登录页
  const gotoLoginPage = () => {
    uni.navigateTo({
      url: '/pages/profile/login?redirectUrl=/pages/message/message'
    })
  }
</script>
<template>
  <!-- 导航栏 -->
  <bit-nav-bar
    title="消息"
    :showLeftArrow="false"
  />
  <!-- 消息列表 -->
  <scroll-view
    scroll-y
    class="message"
  >
    <!-- 未登录 -->
    <template v-if="!userStore.token">
      <view class="message-unlogin">
        <view class="message-unlogin__image">
          <image
            class="image"
            src="https://bitejiaoyan.oss-cn-chengdu.aliyuncs.com/bitehouse/web/common/quesheng.png"
            mode="widthFix"
          />
        </view>
        <view class="message-unlogin__text">您还未登录, 请先登录</view>
        <button
          class="message-unlogin__btn"
          @click="gotoLoginPage"
        >
          去登录
        </button>
      </view>
    </template>
    <!-- 有会话记录 -->
    <template v-else-if="sessionList.length > 0">
      <view class="message-list">
        <view
          class="message-item"
          v-for="{ readingCount, sessionId, messageSendResVO } in sessionList"
          :key="sessionId"
          @click="
            gotoChatPage({
              sessionId,
              msgId: messageSendResVO.id,
              appUserVO: messageSendResVO.appUserVO,
              appUserVOTo: messageSendResVO.appUserVOTo,
              fromId: messageSendResVO.fromId
            })
          "
        >
          <!-- 头像 -->
          <view class="left">
            <image
              class="avatar"
              :src="messageSendResVO.appUserVO.avatar"
              mode="widthFix"
            />
            <bit-badge :unreadNum="readingCount" />
          </view>
          <view class="right">
            <view class="top">
              <text class="nickname">{{ messageSendResVO.appUserVO.nickName }}</text>
              <text class="time">{{ formatTime(messageSendResVO.create_time) }}</text>
            </view>
            <view
              class="bottom"
              v-if="messageSendResVO.type === CHAT_MSG_TYPE.TEXT"
            >
              {{ messageSendResVO.content }}
            </view>
            <view
              class="bottom"
              :class="{ unread: readingCount > 0 }"
              v-else
            >
              <text> [{{ CHAT_MSG_TYPE_TEXT[messageSendResVO.type] }}] </text
              ><text
                class="duration"
                v-if="messageSendResVO.type === CHAT_MSG_TYPE.VOICE"
                >{{ messageSendResVO.time }}''</text
              >
            </view>
          </view>
        </view>
      </view>
      <view class="tips">
        <text class="horizontal-line left"></text>
        <text class="text">已经到底了</text>
        <text class="horizontal-line right"></text>
      </view>
    </template>
    <!-- 无会话记录 -->
    <template v-else>
      <view class="message-no-content">
        <view class="message-no-content__image">
          <image
            class="image"
            src="https://bitejiaoyan.oss-cn-chengdu.aliyuncs.com/bitehouse/web/common/quesheng.png"
            mode="widthFix"
          />
        </view>
        <view class="message-no-content__text">您暂无消息记录</view>
      </view>
    </template>
  </scroll-view>
</template>

<style scoped lang="scss">
  @import '@/styles/variable.scss';
  @import '@/styles/mixins.scss';
  .message {
    position: fixed;
    left: 0;
    right: 0;
    top: 176rpx;
    bottom: 0;
    box-sizing: border-box;
    padding: 30rpx 30rpx 0;
    background-color: var(--main-bg-color);
    &-list {
      border-radius: 16rpx;
      background-color: #fff;
      .message-item {
        box-sizing: border-box;
        display: flex;
        padding-right: 20rpx;
        &:last-child {
          .right {
            border-bottom-color: transparent;
          }
        }
        .left {
          position: relative;
          padding: 30rpx 24rpx 30rpx 30rpx;
          .avatar {
            width: 80rpx;
            height: 80rpx;
            border-radius: 40rpx;
          }
        }
        .right {
          box-sizing: border-box;
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: center;
          height: 146rpx;
          border-bottom: 1rpx solid var(--border-color);
          .top {
            display: flex;
            justify-content: space-between;
            .nickname {
              font-size: var(--font-size-md);
              font-weight: 600;
              color: var(--text-color-dark);
            }
            .time {
              font-size: var(--font-size-xs);
              color: var(--text-color-light);
            }
          }
          .bottom {
            width: 540rpx;
            margin-top: 10rpx;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-size: var(--font-size-sm);
            color: var(--text-color-middle);
            .duration {
              margin-top: 4rpx;
              font-size: var(--font-size-xs);
            }
            &.unread {
              color: #fd5858;
            }
          }
        }
      }
    }
    &-unlogin,
    &-no-content {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      margin: 55rpx 51rpx 0;
      padding-bottom: 55rpx;
      width: 588rpx;
      &__image {
        .image {
          width: 588rpx;
          height: 488rpx;
        }
      }
      &__text {
        margin: -80rpx 0 30rpx;
        font-size: var(--text-color-sm);
        color: var(--text-color-light);
      }
      &__btn {
        padding: 0 30rpx;
        font-size: 30rpx;
        background-color: var(--secondary-bg-color);
        color: #fff;
      }
    }
    .tips {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 40rpx;
      padding-bottom: 30rpx;
      .text {
        margin: 0 10rpx;
        font-size: var(--font-size-sm);
        color: var(--text-color-light);
      }
      .horizontal-line {
        width: 108rpx;
        height: 3rpx;
        &.left {
          background-image: linear-gradient(to right, #f5f5f5, #c9c9c9);
        }
        &.right {
          background-image: linear-gradient(to left, #f5f5f5, #c9c9c9);
        }
      }
    }
  }
</style>
